import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './index.css';
import { InputNumber } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom';
export default function Shop() {
    const [typelist, settypelist] = useState([]);
    const [shoplist, setshoplist] = useState([]);
    const [filteredShoplist, setFilteredShoplist] = useState([]); // 用于保存过滤后的shoplist
    const [selected, setselected] = useState(null);
    const navigate=useNavigate()
    useEffect(() => {
        handletypelist();
        handleshoplist();
    }, []);

    const handleshoplist = async () => {
        let { data } = await axios.get('http://127.0.0.1:3000/shoplist');
        setshoplist(data.data);
        setFilteredShoplist(data.data); // 初始时设置为完整的shoplist
    };

    const handletypelist = async () => {
        let { data } = await axios.get('http://127.0.0.1:3000/shopTypelist');
        settypelist(data.data);
    };

    const handleclick = (id) => {
        let shopslist = shoplist.filter(item => item.pid === id);
        setFilteredShoplist(shopslist); // 设置过滤后的shoplist
        setselected(id); // 设置选中的分类ID
    };

    const handlejian=async(id)=>{
      const shopfilter=  shoplist.find(item=>item._id===id)

      if(shopfilter && shopfilter.num >= 1){
            await axios.put('http://127.0.0.1:3000/shopEdit',{...shopfilter,num:shopfilter.num-1})
            handleshoplist();
      }
    }
    const handlejia=async(id)=>{
        const shopfilter=shoplist.find(item=>item._id===id)
        console.log(shopfilter);
        if(shopfilter){
            await axios.put('http://127.0.0.1:3000/shopEdit',{...shopfilter,num:shopfilter.num+1})
            handleshoplist()
        }
    }

    const handleDetail=(item)=>{
        navigate('/detail/'+item._id)
    }
    return (
        <div>
            <div className='bg'>
                <div className='caidan'>
                    {typelist.map(item => (
                        <div
                            key={item._id}
                            onClick={() => handleclick(item._id)}
                            className={selected === item._id ? 'selected' : ''}
                        >
                            {item.name}
                        </div>
                    ))}
                </div>
                <div>
                    {filteredShoplist.map(item => (
                        <div key={item._id} className='shoplist' onClick={()=>{handleDetail(item)}}>
                            <div style={{ width: '40%' }}>
                                <img src={item.imgpath} style={{ width: '100%' }} alt="" />
                            </div>
                            <div style={{ width: '60%' }}>
                                <div>{item.name}</div>
                                <div style={{display:'flex',justifyContent:'space-around'}}>
                                    <div onClick={()=>handlejian(item._id)}>-</div>
                                   <div>{item.num}</div> 
                                    <div  onClick={()=>handlejia(item._id)}>+</div>
                                    </div>
                                <div>{item.price}</div>
                                <div>{item.content}</div>
                            </div>
               
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
